<template>
  <div>
    <el-card shadow="never">
      <h3>公告管理</h3>
    </el-card>
    <br>
    <data-table :table-data="tableData">
      <el-table-column
        label="编号"
        align="center"
        fixed=""
      >
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="标题"
        align="center"
        fixed=""
      >
        <template slot-scope="scope">
          <span>{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="发表时间"
        align="center"
        fixed=""
      >
        <template slot-scope="scope">
          <span>{{ scope.row.createTime|formatDate2 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="#"
        align="center"
        fixed=""
      >
        <template slot-scope="scope">
          <el-button size="mini" plain type="primary" @click="$router.push(`/admin/notice/edit/${scope.row.id}`)">编辑</el-button>
          <el-button size="mini" plain type="danger" @click="delBtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </data-table>
  </div>
</template>

<script>
import DataTable from '@/components/DataTable/index.vue'
import * as noticeApi from '@/api/notice'
export default {
  name: 'Notice',
  components: {
    DataTable
  },
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      noticeApi.list().then(resp => {
        this.tableData = resp.data
      })
    },
    delBtn(row) {
      this.$confirm('确认要删除？', '提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'error'
      }).then(() => {
        noticeApi.del(row.id).then(resp => {
          this.$notifySuccess('删除成功')
          this.getData()
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
